<template>
  <div>
    <!-- 面包屑导航区域 -->
    <bread-crumb :breadContent="breadContent"></bread-crumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="请输入内容"
            v-model="queryInfo.key"
            clearable
            @clear="getOrganizationList"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getOrganizationList"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible = true">添加组织</el-button>
        </el-col>
      </el-row>
      <br />

      <el-table border stripe :max-height="pageHeight - 20" :data="organizationList">
        <el-table-column label="组织ID" align="center" prop="id"></el-table-column>
        <el-table-column label="组织名称" align="center" prop="name"></el-table-column>
      </el-table>
    </el-card>

    <!-- 添加组织的对话框 -->
    <el-dialog
      title="添加组织"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addDialogClosed"
    >
      <!-- 内容主体区域 -->
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="80px">
        <el-form-item label="组织名称" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrganization">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        breadContent: ["组织管理", "组织列表"],
        organizationList:[], // 组织列表  
        queryInfo:{
          // 当前的页数
          page: 1,
          // 当前每页显示多少条数据
          size: 10
        },
        total:0,
        // 控制添加组织对话框的显示与隐藏
        addDialogVisible: false,
        // 添加表单的验证规则对象
        addFormRules: {
          name: [
            { required: true, message: '请输入组织名称', trigger: 'blur' },
          ]
        },
        addForm:{

        }
      }
    },
    methods:{
      // 获取组织列表
      async getOrganizationList(){
        const {data:res} = await this.$http.get('organization/page',this.queryInfo)
        if(res.status !== 200) return this.$message.error("获取组织列表失败！")
        this.organizationList = res.data.records
        this.total = res.total
        console.log(this.organizationList)
      },

      // 监听添加组织对话框的关闭事件
      addDialogClosed () {
        this.$refs.addFormRef.resetFields()
      },

      // 添加组织
      async addOrganization(){
        const {data:res} = await this.$http.post('organization/add',{name:this.addForm.name})
        if(res.status !== 200) return this.$message.error("添加组织失败！")
        this.$message.success("添加组织成功！")
        this.getOrganizationList()
        this.addDialogVisible = flase
      }
    },
    created(){
      this.getOrganizationList()
    }
  }
</script>

<style lang="less" scoped>

</style>